Top React Libraries — Date Pickers and Clicks Outside

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

React Date Picker

We can add a date picker to our React app with the React Date Picker package.

To install it, we run:

npm i react-datepicker

Then we can use it by writing:

import React from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const [date, setDate] = React.useState(new Date());

  const handleChange = date => {
    setDate(date);
  };

  return (
    <div className="App">
      <DatePicker selected={date} onChange={handleChange} />
    </div>
  );
}

We just use useState to create our state.

Then we pass in the date state as the value of the selected prop.

onChange has the change handler to update the selected value as the new value of the date state.

It’s reusable and configurable.

We can add a timer picker to it.

Also, it supports localization.

We can add a time picker with the showTimeSelect prop:

import React from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const [date, setDate] = React.useState(new Date());

  const handleChange = date => {
    setDate(date);
  };

  return (
    <div className="App">
      <DatePicker showTimeSelect selected={date} onChange={handleChange} />
    </div>
  );
}

It supports most modern browsers include the latest Internet Explorer version.

react-onclickoutside

We can use the react-onclickoutside package to detect clicks outside a component.

To install it, we can run:

npm i react-onclickoutside

Then we can use it by writing:

import React, { useState } from "react";
import onClickOutside from "react-onclickoutside";
import "./styles.css";

const Menu = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

Menu.handleClickOutside = () => setIsOpen(false);
  return (
    <li className={isOpen ? "m-menu -active" : "m-menu "} onClick={toggle}>
      <div> Open Menu </div>
      <ul className="m-menu__list">
        <li className="m-menu__item">
          <div className="m-menu__link">Log Out</div>
        </li>
      </ul>
    </li>
  );
};

const clickOutsideConfig = {
  handleClickOutside: () => Menu.handleClickOutside
};

const OutsideMenu = onClickOutside(Menu, clickOutsideConfig);

export default function App() {
  return (
    <div className="App">
      <OutsideMenu />
    </div>
  );
}

In style.css , we write:

.App {
  font-family: sans-serif;
}

.-padding-4 {
  padding: 4px;
}

.m-menu {
  list-style-type: none;
  position: relative;
  z-index: 101;
}
.m-menu.-active .m-menu__icon path {
  fill: #0b3895;
}
.m-menu.-active .m-menu__list {
  transform: scale(1);
}
.m-menu__list {
  position: relative;
  text-align: left;
  width: 100px;
  top: 50%;
  z-index: 101;
  padding: 0;
  border-radius: 8px;
  background-color: #fff;
  transform: scale(0);
  transform-origin: 0 1;
  border: 1px solid gray;
}
.m-menu__item {
  display: block;
  width: 100%;
  padding: 12px;
}
.m-menu__item:hover {
  color: #0b3895;
}
.m-menu__link {
  width: 100%;
  padding: 4px;
  display: inline-block;
  white-space: pre;
}
.m-menu__link:hover {
  color: #0b3895;
  text-decoration: none;
}

to apply the styles.

We use the onClickOutside higher-order component to let us listen to clicks outside the component.

The handleClickOutside function which we used as the click outside listener is added as a property of the component

Then we use it in the higher-order component to let us listen to the click outside events.

And then we can use the menu in App .

In styles.css , we add styles so that the menus is displayed below the button.

We also make it position: relative so that we can see the menu over other items.

It has other options.

We can prevent default behavior or stop the propagation of the click outside event.

And we can enable or disable listening to clicks outside.

Conclusion

We can use React Date Picker to add a date picker to our React app.

The react-onclickoutside package lets us listen to clicks outside a component.